import React from "react";
import {Platform} from "react-native";
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import {useTheme} from "@rn-vui/themed";
import Settings from "../pages/settings/Settings.tsx";


const Stack = createNativeStackNavigator();
const SettingsNavigator = ({navigation}: any) => {
    const theme = useTheme().theme;
    React.useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: false,
        });
    });

    return (
        <Stack.Navigator
            screenOptions={({navigation}: any) => ({
                animation: Platform.select({
                    ios: "default",
                    android: "slide_from_right",
                }),
                statusBarStyle: "dark",
                statusBarColor: theme?.colors?.white,
                presentation: "card",
                headerTintColor: theme?.colors?.secondary,
                headerTitleStyle: {
                    fontSize: 18,
                },
                headerStyle: {
                    backgroundColor: theme?.colors?.white,
                },
                headerTitleAlign: 'center',
                contentStyle: {
                    backgroundColor: theme?.colors?.white,
                }
            })}
        >
            <Stack.Screen name={"Settings"} component={Settings}/>
        </Stack.Navigator>
    );
};

export default SettingsNavigator;
